<template>
  <!-- 最近一周系统报错分布 -->
      <div id="main"  style="width: 100%;height:400px;" ></div>



</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { GetSystem } from '@/api/datalistQueue'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      systems: [],
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  created() {
    // Mock: get all routes and roles list from server

    this.getSystem()
  },
  methods: {
    async getSystem() { // 获取列表数据，通用

      const res = await GetSystem({  })

      this.systems = res.data.Table

      console.log(this.systems)
      this.setOptions(this.systems)
    },

    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

    },

    setOptions(systems) {

      this.chart.setOption({
				title: {
				        text: '订单趋势',
				        
				    },
				    tooltip: {
				        trigger: 'axis'
				    },
				    legend: {
				        data: ['2018年', '2019年']
				    },
				    toolbox: {
				        show: true,
				        feature: {
				            dataZoom: {
				                yAxisIndex: 'none'
				            },
				            dataView: {readOnly: false},
				            magicType: {type: ['line', 'bar']},
				            restore: {},
				            saveAsImage: {}
				        }
				    },
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月' ,'8月' , '9月','10月','11月','12月']
				    },
				    yAxis: {
				        type: 'value',
				        axisLabel: {
				            formatter: '{value}'
				        }
				    },
				    series: [
				        {
				            name: '2018年',
				            type: 'line',
				            data: [436.9, 746.3, 370.6, 1396.2, 717.9, 670.5, 887.5, 991.5, 1435.6, 973, 993.4,	843.9],
				            markPoint: {
				                data: [
				                    {type: 'max', name: '最大值'},
				                    {type: 'min', name: '最小值'}
				                ]
				            },
				            markLine: {
				                data: [
				                    {type: 'average', name: '平均值'}
				                ]
				            }
				        },
				        {
				            name: '2019年',
				            type: 'line',
				            data: [687.5, 253.9, 347.2, 671.1, 513.9, 412.4, 276.4, 532.3, 792.9, 710.7, 1400.1, 1017.7],
				            markPoint: {
				                data: [
									{type: 'max', name: '最大值'},
									{type: 'min', name: '最小值'}
				                    /* {name: '年最低', value: -2, xAxis: 1, yAxis: -1.5} */
				                ]
				            },
				            markLine: {
				                data: [
				                    {type: 'average', name: '平均值'},
				                    [{
				                       /* symbol: 'none',
				                        x: '90%',
				                        yAxis: 'max' */
				                    }, {
				                       /* symbol: 'circle',
				                        label: {
				                            position: 'start',
				                            formatter: '最大值'
				                        },
				                        type: 'max',
				                        name: '最高点' */
				                    }]
				                ]
				            }
				        }
				    ]
				
        /* title: {
                text: '订单趋势'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['2018年', '2019年']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月' ,'8月' , '9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '2018年',
                    type: 'line',
                    stack: '总量',
                    data: [436.9, 746.3, 370.6, 1396.2, 717.9, 670.5, 887.5, 991.5, 1435.6, 973, 993.4,	843.9]
                },
                {
                    name: '2019年',
                    type: 'line',
                    stack: '总量',
                    data: [687.5, 253.9, 347.2, 671.1, 513.9, 412.4, 276.4, 532.3, 792.9, 710.7, 1400.1, 1017.7]
                }
            ] */
        
      })

    }


  }
}
</script>
